<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方体盒子</title>
</head>
    <style>
        html,body,li,ul{
            margin:0;
            padding:0;
            list-style: none;
        }
        .zft{
            width: 500px;
            height: 500px;
            border:2px solid #666666;

            margin: 50px auto;
            background: #8a9088;
            perspective: 600px;

        }
        ul{
            width: 250px;
            height: 250px;
            margin:150px 150px;
            position: relative;
            /*perspective: 400px;*/
            transition: all 5s;
            transform-style: preserve-3d;
            transform-origin: 100px 0px;
        }
        li{
            width: 200px;
            height:200px;
            background: rgba(249, 43, 217, 0.8);
            position: absolute;
            top:0;
            left:0;
            text-align: center;
            line-height:200px;
            font-size: 50px;
            font-weight: 400;
            color: #fff;
        }
        li:first-child{
            background: rgba(255, 0, 129, 0.5);
            transform: translateZ(-100px);
        }
        li:nth-child(2){
            background: rgba(186, 0, 231, 0.6);
            transform: translateZ(100px);
        }
        li:nth-child(3){
            background: rgba(25, 252, 255, 0.8);
            transform: rotateY(90deg) translateZ(100px);
        }
        li:nth-last-child(3){
            background: rgba(255, 66, 104, 0.8);
            transform: rotateY(90deg) translateZ(-100px);
        }
        li:nth-last-child(2){
            background: rgba(45, 89, 255, 0.8);
            transform: rotateX(90deg) translateZ(-100px);
        }
        li:last-child{
            background: rgba(112, 255, 69, 0.8);
            transform: rotateX(90deg) translateZ(100px);

        }
        .zft:hover ul{
            transform:rotateY(720deg);
            /*transform-origin: 250px 250px;*/
            /*transform-origin: center center;*/
        }

    </style>
<body>
<div class="zft">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
</body>
</html>